<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个重要的内置关系</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
    VueComponent.prototype.__proto__ === Vue.prototype
    这样设计的原因是 可以复用 Vue.prototype中的大量方法
-->
<div id="root">
    <school></school>
</div>
<script>
    Vue.config.productionTip = false;
    Vue.config.devtools = true;


    //定义组件 传入的对象和new Vue()中的对象差不多
    const school = Vue.extend({
        //注意不要配置el 组件不会对单独的容器使用 而且这里的data要用函数式 作用:一个页面对其数据的修改 不会影响到其他的页面
        data() {
            return {
                schoolName: '尚硅谷',
                address: '北京昌平'
            }
        },
        //定义组件的时候要定义使用模板 要用模板字符串 主要模板的最外面要加 div标签
        template: `
          <div>
          <h2>学校名称:{{ schoolName }}</h2>
          <h2>学校地址:{{ address }}</h2>
          <button @click="msg">点我输出this</button>
          </div>
        `,
        methods: {
            msg() {
                console.log(this);
            }
        }

    });

    //注册组件(局部注册)
    const vm = new Vue({
        el: '#root',
        components: {
            // 组件的真实名字 组件的对象 如果两个名字相同 直接写一个名字即可
            school: school,
        }
    });


</script>
</body>
</html>